import React from 'react';
import { connect } from 'dva';
import { RefreshControl, ListView, Icon, List, NavBar, Flex, Button } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';


const Item = List.Item;
const Brief = Item.Brief;

const data = [
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',
  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',
  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',
  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',
  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
];

let index = data.length - 1;

let pageIndex = 0;

class P extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    this.initData = Array.from(data);
    this.state = {
      dataSource: dataSource.cloneWithRows(this.initData),
      refreshing: false,
      isLoading: false,
      hasMore: true,
    };
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    setTimeout(() => {
      this.initData = Array.from(data);
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.initData),
        refreshing: false,
      });
    }, 1000);
  };
  onScroll = () => {

  };
  onEndReached = (event) => {
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    console.log('reach end', event);
    this.setState({ isLoading: true });
    setTimeout(() => {
      pageIndex += 1;
      this.initData = [...this.initData, ...data];
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.initData),
        isLoading: false,
      });
      if (pageIndex > 1) {
        this.setState({
          hasMore: false,
        });
      }
    }, 1000);
  }
  render() {
    const row = (rowData, sectionID, rowID) => {
      if (index < 0) {
        index = data.length - 1;
      }
      return (
        <Item
          arrow="horizontal"
          thumb={<Icon type={require('../svg/user.svg')} />}
          onClick={() => {
            this.props.dispatch(routerRedux.push({
              pathname: '/p1_info',
            }));
          }}
        >
          {rowData.name} <Brief>{rowData.tel}</Brief>
        </Item>
      );
    };
    return (
      <Container title="成长关怀">
        <ListView
          dataSource={this.state.dataSource}
          renderRow={row}
          renderSeparator={null}
          renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
            {!this.state.hasMore ? '已全部加载完' : this.state.isLoading ? '加载中...' : '加载完毕'}
          </div>}
          renderHeader={() => <div size="small">总计10人</div>}

          initialListSize={10}
          pageSize={10}
          scrollRenderAheadDistance={200}
          scrollEventThrottle={20}
          onScroll={this.onScroll}
          onEndReached={this.onEndReached}
          onEndReachedThreshold={10}
          useBodyScroll
        />
      </Container>
    );
  }
}
export default connect()(P);
